{% extends '../_manage.html' %}

{% block title %} Wiki Tree List {% endblock %}

{% block head %}

<script>
    let g_wiki = null;

    let g_wiki_id = parseInt('{{ id }}');

    let g_wiki_name = null;

    let g_ajaxing = false;

    function is_ajaxing() {
        return g_ajaxing;
    }

    function start_ajax() {
        g_ajaxing = true;
        $('#ajaxing').show();
    }

    function end_ajax() {
        g_ajaxing = false;
        $('#ajaxing').hide();
    }

    function set_button_enabled(btn, enabled) {
        if (enabled) {
            btn.removeAttr('disabled');
        }
        else {
            btn.attr('disabled', 'disabled');
        }
    }

    function update_button_group(node) {
        set_button_enabled($('#btn-add'), node !== null);
        set_button_enabled($('#btn-edit'), node !== null);
        set_button_enabled($('#btn-delete'), node !== null && node.id && node.id !== g_wiki_id && node.children.length === 0);
    }

    function index_of_me(node) {
        var L = node.parent.children;
        return L.findIndex(n => n === node);
    }

    function move_api(moved, parent, index) {
        start_ajax();
        let pid = parent.id;
        doAsync(
            async () => {
                await postJson(`/api/wikiPages/${moved.id}/move`, {
                    displayIndex: index,
                    parentId: pid
                });
            },
            () => {},
            err => UIkit.modal.alert(translateError(err)),
            end_ajax
        );
    }

    function move_node(moved_node, target_node, position, previous_parent) {
        if (position == 'inside') {
            // move to target as first child:
            move_api(moved_node, target_node, 0);
        }
        if (position == 'after') {
            // move to target as n position:
            move_api(moved_node, target_node.parent, index_of_me(target_node) + 1);
        }
    }

    function delete_wikipage() {
        let node = $('#tree').tree('getSelectedNode');

        UIkit.modal.confirm(`Wiki page "${node.name}" will be deleted. Continue?`, () => {
            start_ajax();
            doAsync(
                async () => {
                    await postJson(`/api/wikiPages/${node.id}/delete`);
                    $('#tree').tree('removeNode', node);
                    preview_wiki(null);
                },
                () => {},
                err => UIkit.modal.alert(translateError(err)),
                end_ajax
            );
        });
    }

    function set_preview_error(msg) {
        $('#wiki-preview-content').html(`<span style="color:red">Error: ${msg}</span>`);
    }

    function preview_wiki(node) {
        // init:
        if (node == null) {
            $('#wiki-preview-name').text('Preview');
            $('#wiki-preview-content').text('');
            return;
        }
        let preview_url = '/wiki/' + g_wiki_id + (node.id === g_wiki_id ? '' : '/' + node.id);
        let preview_name = $('<div/>').text(node.name).html();
        $('#wiki-preview-name').html(`<a href="${preview_url}" target="_blank">${preview_name}</a>`);
        $('#wiki-preview-content').text("{{ _('Loading') }}...");
        let url = node.id === g_wiki_id ? `/api/wikis/${g_wiki_id}` : `/api/wikiPages/${node.id}`;
        doAsync(
            async () => {
                let result = await getJson(url);
                let $publish = $('#wiki-preview-publish-at');
	            if (result.publishAt > g_timestamp) {
	                let pubTime = result.publishAt.toDateTime();
	                $publish.html(`<i class="uk-icon-eye-slash"></i> Publish at ${pubTime}`);
	                $publish.show();
	            } else {
	                $publish.hide();
	            }
	            $('#wiki-preview-content').html(marked.parse(result.content));
            },
            () => {},
            err => set_preview_error(err.message || err.error)
        );
    }

    function getPublishAt(nodeId) {
        return getNodePublishAt(g_wiki, nodeId);
    }

    function getNodePublishAt(currentNode, nodeId) {
        if (currentNode.id === nodeId) {
            return currentNode.publishAt;
        }
        let p = -1;
        for (let i = 0; i < currentNode.children.length; i++) {
            p = getNodePublishAt(currentNode.children[i], nodeId);
            if (p >= 0) {
                return p;
            }
        }
        return -1;
    }

    $(() => {
        // load wiki:
        doAsync(
            async () => {
                let w = await getJson(`/api/wikis/${g_wiki_id}/tree`);
                g_wiki = w;
                g_wiki_name = w.name;
                initTree();
                let root = $('#tree').tree('getNodeById', g_wiki.id);
                $('#tree').tree('openNode', root);
            },
            () => {},
            err => UIkit.modal.alert(translateError(err))
        );
    });

    function initTree() {
        $('#tree').tree({
            data: [{ 'id': g_wiki.id, 'name': g_wiki.name, 'children': g_wiki.children }],
            autoOpen: false,
            dragAndDrop: true,
            onCreateLi: function (node, $li) {
                let p = getPublishAt(node.id);
                if (p > g_timestamp) {
                    $li.find('.jqtree-element').append(' <i class="uk-icon-eye-slash"></i>');
                }
            },
            onCanMove: function (node) {
                return !is_ajaxing() && node.id !== g_wiki.id;
            },
            onCanMoveTo: function (moved_node, target_node, position) {
                return target_node.id !== g_wiki.id;
            },
            onCanSelectNode: function (node) {
                return !is_ajaxing();
            }
        });
        $('#tree').bind('tree.select', function (event) {
            update_button_group(event.node);
            if (event.node) {
                preview_wiki(event.node);
            }
            else {
                preview_wiki(null);
            }
        });
        $('#tree').bind('tree.move', function (event) {
            move_node(event.move_info.moved_node, event.move_info.target_node, event.move_info.position, event.move_info.previous_parent);
        });

        $('#btn-add').click(function () {
            let $tree = $('#tree');
            let node = $tree.tree('getSelectedNode');
            let now = Date.now();
            let pub = node.publishAt <= now ? now + 3600000 : node.publishAt;
            UIkit.modal.prompt("{{ _('Name') }}:", "{{ _('New Wiki Page') }}", (name) => {
                doAsync(
                    async () => {
                    	let result = await postJson(`/api/wikis/${g_wiki.id}/wikiPages`, {
                            parentId: node.id,
                            name: name,
                            publishAt: pub,
                            content: 'New wiki page content'
                        });
	                    $tree.tree('appendNode', result, node);
	                    $tree.tree('openNode', node);
	                    $tree.tree('selectNode', $tree.tree('getNodeById', result.id));
                    },
                    () => {},
                    err => UIkit.modal.alert(translateError(err))
                );
            });
        });

        $('#btn-edit').click(function () {
            let node = $('#tree').tree('getSelectedNode');
            if (node.id === g_wiki.id) {
                location.assign(`wiki_update?id=${g_wiki.id}`);
            }
            else {
                location.assign(`wikipage_update?id=${node.id}`);
            }
        });

        $('#btn-delete').click(function () {
            delete_wikipage();
        });

        $('#btn-refresh').click(function () {
            refresh();
        });

        $('#loading').hide();
        $('#vm').show();
    }
</script>

{% endblock %}

{% block main %}

<div id="loading" class="uk-width-1-1">
    <i class="uk-icon-spinner uk-icon-spin"></i> {{ _('Loading') }}...
</div>

<div id="vm" class="uk-width-1-1">
    <ul class="uk-breadcrumb">
        <li><a href="/manage/wiki/">{{ _('All Wikis') }}</a></li>
        <li class="uk-active"><span>{{ _('Wiki Index') }}</span></li>
    </ul>

    <div class="uk-margin uk-button-group">
        <button id="btn-refresh" class="uk-button"><i class="uk-icon-refresh"></i> {{ _('Refresh') }}</button>
        <button id="btn-add" disabled class="uk-button"><i class="uk-icon-plus"></i> {{ _('New Wiki Page') }}</button>
        <button id="btn-edit" disabled class="uk-button"><i class="uk-icon-edit"></i> {{ _('Edit') }}</button>
        <button id="btn-delete" disabled class="uk-button uk-button-danger"><i class="uk-icon-trash"></i> {{ _('Delete')
            }}</button>
    </div>

    <div class="x-placeholder"></div>
</div>

<div class="uk-width-1-4">
    <div id="tree"></div>
</div>

<div class="uk-width-3-4">
    <h3 id="wiki-preview-name">{{ _('Preview') }}</h3>
    <div id="wiki-preview-publish-at"></div>
    <hr>
    <div id="wiki-preview-content"></div>
</div>

{% endblock %}